<template>
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">expand</el-radio-button>
      <el-radio-button :label="true">collapse</el-radio-button>
    </el-radio-group>
    <el-col :span="12" v-if="color!=='black'">
        <h5 class="mb-2">Default colors</h5>
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
        >
            <el-sub-menu :key="tierKey" :index="tierIndex" v-for="(tierVal,tierKey,tierIndex) in entityMenuData" >
                <template #title>
                    <el-icon><location /></el-icon>
                    <span>{{tierKey}}</span>
                </template>
                <el-sub-menu :key="enityKey" :index="tierIndex+'-'+enityIndex" v-for="( enityVal,enityKey,enityIndex) in tierVal">
                    <template #title>{{enityKey}}</template>
                    <el-menu-item :key="pointKey" :index="tierIndex+'-'+enityIndex+'-'+pointIndex" v-for=" ( pointVal,pointKey,pointIndex) in enityVal">{{pointKey}}</el-menu-item>
                </el-sub-menu>
            </el-sub-menu>
        </el-menu>
    </el-col>
    <el-col :span="5" v-if="color='black'">
        <h5 class="mb-2">Custom colors</h5>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            :collapse="isCollapse"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
        >
            <el-sub-menu :key="tierKey" :index="tierIndex" v-for="(tierVal,tierKey,tierIndex) in entityMenuData" >
                <template #title>
                    <el-icon><location /></el-icon>
                    <span>{{tierKey}}</span>
                </template>
                <el-sub-menu :key="enityKey" :index="tierIndex+'-'+enityIndex" v-for="( enityVal,enityKey,enityIndex) in tierVal">
                    <template #title>{{enityKey}}</template>
                    <el-menu-item :key="pointKey" :index="tierIndex+'-'+enityIndex+'-'+pointIndex" v-for=" ( pointVal,pointKey,pointIndex) in enityVal">{{pointKey}}</el-menu-item>
                </el-sub-menu>
            </el-sub-menu>
        </el-menu>
    </el-col>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  
  const isCollapse = ref(true)
  const color='black'
  const entityMenuData={
    '层面1':{
        '实体1':{
            '测评点1':1,
            '测评点2':1
        },
        '实体2':{
            '测评点1':1,
            '测评点2':1
        }
    },
    '层面2':{
        '实体1':{
            '测评点1':1,
            '测评点2':1
        },
        '实体2':{
            '测评点1':1,
            '测评点2':1
        }
    }
  }
  </script>
  